<template>
  <view class="uni-wrap">
    <uni-row class="search-row">
      <uni-col :span="3">
        <view class="scan-box" @click="openScan">
          <uni-icons type="scan" :size="28" color="#1677FF" />
        </view>
      </uni-col>
      <uni-col :span="21">
        <uni-search-bar
          class="search-box"
          radius="18"
          placeholder="钢瓶编码"
          clearButton="auto"
          cancelButton="none"
          v-model="searchValue"
          @input="input"
        />
      </uni-col>
    </uni-row>

    <view class="uni-list pt56">
      <view v-if="list.length == 0 && !!finishSearch">
        <view class="no-data-wrap">
          <image mode="aspectFit" src="/static/no_data.png"></image>
          <text>暂无数据</text>
        </view>
      </view>
      <view v-else>
        <view
          class="uni-list-cell"
          hover-class="uni-list-cell-hover"
          v-for="(item, index) in list"
          :key="index"
          :data-bottleid="item.id"
          @click="openinfo"
        >
          <view class="uni-media-list">
            <image
              class="uni-media-list-logo"
              mode="aspectFit"
              :src="bottleImgUrl"
            ></image>
            <view class="uni-media-list-body">
              <view class="uni-media-list-text-top uni-ellipsis">{{
                item.steelcyinderCode || "-"
              }}</view>
              <view class="uni-media-list-text-bottom uni-ellipsis"
                >产品名称：{{ item.productName || "-" }}
              </view>
                <view class="uni-media-list-text-bottom uni-ellipsis"
                >钢瓶容量：{{ item.steelcyinderName || "-" }}
              </view>
              <view class="uni-media-list-text-bottom uni-ellipsis"
                >规格型号：{{ item.steelcyinderSpecs || "-" }}
              </view>
              <view class="uni-media-list-text-bottom uni-ellipsis"
                >入库时间： {{ item.enableDate || "-" }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      size: 10,
      list: [],
      hasMore: true,
      searchValue: "",
      finishSearch: false,
      bottleImgUrl: "/static/bottle_default.png"
    };
  },
  onLoad() {
    this.getList();
  },
  onShow() {},
  methods: {
    getList() {
      uni.hideLoading();
      this.finishSearch = true;
      
      uni.showLoading({
        title: "加载中....",
      });
      let params = {
        pageNum: this.current,
        pageSize: this.size,
        steelcyinderCode: this.searchValue || "",
        workshopCode: 0
      };
      this.$get("/basicData/steelcyinder/list", params).then((res) => {
        if (res.rows.length < this.size) {
          this.hasMore = false;
        }
        this.current = this.current + 1;
        this.list = this.list.concat(res.rows);
        uni.hideLoading();
        this.finishSearch = true;
      });
    },
    openScan() {
      let that = this;
      // 允许从相机和相册扫码
      uni.scanCode({
        success: function (res) {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
          if (res.result) {
            // let deviceName = (res.result =
            //   res.result.match(/设备名称:(\S*)/)[1]);
            let bottleCode = res.result;
            that.searchValue = bottleCode;
          }
        },
      });
    },

    input(value) {
      let that = this;
      that.clearParams();
      clearTimeout(that.timer);
      that.timer = setTimeout(() => {
        that.getList();
      }, 500);
    },

    clearParams() {
      this.current = 1;
      this.size = 10;
      this.list = [];
      this.hasMore = true;
      this.finishSearch = false;
    },

    onPullDownRefresh() {
      this.clearParams();
      uni.showLoading({
        title: "刷新中....",
      });
      setTimeout(() => {
        this.getList();
        uni.hideLoading();
        uni.stopPullDownRefresh();
      }, 500);
    },

    
    openinfo(e) {
      const bottleid = e.currentTarget.dataset.bottleid;
      uni.navigateTo({
        url: "/pages/bottle/info?bottleid=" + bottleid,
        fail(error) {
          console.log(error);
        },
      });
    },
  },
};
</script>

<style lang="scss">
.search-row {
  display: flex;
  align-items: center;
  background-color: #fff;
  .scan-box {
    text-align: center;
  }
}
</style>
